/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="data-card">
        <div class="data-card-top">
            <div class="data-card-top__left">
                <div class="data-card-top__value">
                    <span>{{ data.usage }}</span>
                    <span class="data-card-top__value--ignore">GB</span>
                    <span>/{{ data.sum }}</span>
                    <span class="data-card-top__value--ignore">GB</span>
                </div>
                <div class="data-card-top__label">当前存储空间占用</div>
            </div>
            <img src="./img/Dataset.png" alt="">
        </div>
        <el-divider/>
        <div class="data-card-info">
            <div class="card-info__title">
                <span class="card-info-title__name">{{ data.pvc }}</span>
                <span class="card-info-title__value">总容量：{{ data.sum }}GB</span>
            </div>
            <div class="card-info__progress">
                <sf-progress-bar :value="progressValue"
                                 :text-hidden="true"
                                 :default-height="32"
                                 front-color="#626D8C"
                                 back-color="#CCCFD9"
                                 class="progressbar-item"/>
            </div>
            <div class="card-info__tips">
                <span class="card-info-tips__used"> 已占用{{ data.usage }}GB  </span>
                <span class="card-info-tips__remain"> 剩余容量{{ (Number(data.sum) - Number(data.usage)).toFixed(2) }}GB </span>
            </div>
            <div v-if="progressValue>=0.9" class="card-info__alarm">
                <sf-alert type="warning"
                          :center="false"
                          :show-default-opr="false"
                          :closable="false"
                          class="alert-item"
                          size="small"
                          title="当前存储空间剩余容量已小于10%，请及时进行清理"/>
            </div>
        </div>
    </div>
</template>

<script>
import IntervalTask from 'src/util/interval_task';

export default {
    props: {
        id: {
            type: String,
            default: ''
        },
    },
    data() {
        return {
            data: {}
        }
    },
    watch: {
        id() {
            this._createIntervalTask()
        },
    },
    computed: {
        progressValue() {
            return Number((Number(this.data.usage) / Number(this.data.sum) || 0).toFixed(2))
        }
    },
    methods: {
        async getData() {
            const {success, data, msg} = await this.$ajax.post('/notebooks/v1/notebooks/show-pvc-usage', {
                id: this.id,
            })
            if (!success) {
                this.$showErr(msg);
                this._stopIntervalTask();
                return;
            }
            this.data = data;
        },
        _createIntervalTask() {
            let vm = this;
            this.intervalTask = new IntervalTask({
                fn: () => {
                    vm.getData().then(() => {
                        vm.intervalTask && vm.intervalTask.next();
                    });
                },
                interval: 10000,
                autoStart: true
            });
        },
        _stopIntervalTask() {
            this.intervalTask.stop();
            this.intervalTask = null;
        }
    },
    beforeDestroy() {
        if (this.intervalTask) {
            this._stopIntervalTask();
        }
    },
    
}
</script>
<style lang="less" scoped>
.data-card {
    width: 100%;
    height: 100%;
    
    &-top {
        display: flex;
        justify-content: space-between;
        color: #3D3D3D;
        
        &__value {
            margin: 8px 0;
            height: 28px;
            font-size: 20px;
            text-align: center;
            
            &--ignore {
                height: 17px;
                font-size: 12px;
            }
        }
        
        &__lable {
            height: 17px;
            font-size: 12px;
        }
    }
    
    .el-divider {
        margin: 12px 0 13px 0;
    }
    
    &-info {
        .card-info {
            &__title {
                display: flex;
                justify-content: space-between;
                height: 17px;
                font-size: 12px;
                color: #3D3D3D;
                padding-right: 12px;
                margin-bottom: 24px;
            }
            
            &__tips {
                height: 17px;
                font-size: 12px;
                color: #3D3D3D;
                margin-top: 16px;
                
                .card-info-tips {
                    &__used, &__remain {
                        &:before {
                            content: "";
                            width: 8px;
                            height: 8px;
                            border-radius: 100%;
                            display: inline-block;
                        }
                    }
                    
                    &__used {
                        margin-right: 35px;
                        
                        &:before {
                            background: #626D8C;
                        }
                        
                    }
                    
                    &__remain {
                        &:before {
                            background: #CCCFD9;
                        }
                    }
                    
                }
            }
            
            &__alarm {
                margin-top: 24px;
                
                .alert-item {
                    padding: 0 12px;
                    color: #EE8800;
                    
                    /deep/ .sfv-alert__title {
                        max-width: 100%;
                    }
                }
            }
        }
    }
}
</style>
